<template>
    <div class="page-setting">
        <div class="crumbs">
            <router-link to="/">首页</router-link> / <span>系统设置</span> /
            <span class="active">部门与账号</span>
        </div>
        <el-container :style="{ height: mainH + 'px' }">
            <el-aside class="area-blk" width="248px">
                <h2 class="hd">企业单位部门 (右键添加/编辑部门)</h2>
                <departmentTree :isAdmin="isAdmin" @nodeClick="orgClickAction"></departmentTree>
            </el-aside>
            <el-main class="census-main">
                <div class="opers flex v-c">
                    <el-form :inline="true" class="filter-blk flex-1">
                        <el-form-item label="账号">
                            <el-input
                                placeholder="请输入账号"
                                v-model.trim="filterForm.accountName"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input
                                placeholder="请输入姓名"
                                v-model.trim="filterForm.name"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="searchAction">
                                <i class="iconfont icon-search"></i> 查询
                            </el-button>
                        </el-form-item>
                    </el-form>
                    <!-- <el-button type="blue" @click="addDepartmentAction"><i class="iconfont icon-add"></i> 新增部门</el-button> -->
                    <el-button
                        type="blue"
                        @click="addAccountAction"
                        v-if="hasPermission('006001004')"
                        :disabled="!$store.getters.hasEditPermission"
                        ><i class="iconfont icon-add"></i> 新增账号</el-button
                    >
                </div>
                <el-table :data="dataList" style="width: 100%" v-loading="loading">
                    <el-table-column
                        type="index"
                        label="序号"
                        width="90"
                        :index="indexMethod"
                    ></el-table-column>
                    <el-table-column prop="departmentName" label="所属部门"></el-table-column>
                    <el-table-column prop="accountname" label="账号"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="phone" label="手机"></el-table-column>
                    <el-table-column prop="email" label="邮箱"></el-table-column>
                    <el-table-column label="操作" width="240">
                        <template slot-scope="scope">
                            <div class="nowrap">
                                <!-- <el-button type="green" @click="authAction(scope.row)">权限访问</el-button> -->
                                <el-button
                                    type="primary"
                                    @click="editAction(scope.row)"
                                    v-if="hasPermission('006001005')"
                                    :disabled="!$store.getters.hasEditPermission||siteInfos.accountname==scope.row.accountname"
                                >
                                    编辑
                                </el-button>
                                <el-button
                                    type="green"
                                    @click="deleteAction(scope.row, scope.$index)"
                                    v-if="hasPermission('006001006')"
                                    :disabled="!$store.getters.hasEditPermission"
                                >
                                    删除
                                </el-button>
                                <el-button
                                    type="green"
                                    @click="accountContactAction(scope.row, scope.$index)"
                                    v-if="hasPermission('006001007')"
                                    :disabled="!$store.getters.hasEditPermission"
                                >
                                    舆情平台绑定
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    v-if="total > 0"
                    class="text-right mt-20 mr-20"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="prev, pager, next, total, jumper"
                    :total="total"
                >
                </el-pagination>
            </el-main>
        </el-container>

        <!-- 新增部门 start -->
        <el-dialog
            v-if="newDepartModalVisible"
            :title="newDepartModalTitle"
            :visible.sync="newDepartModalVisible"
            width="660px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
        >
            <NewDepartment
                ref="newDepart"
                :activeData="activeDepartData"
                @success="submitDepartSuccessAction"
                @fail="adding = false"
                @submitting="adding = true"
                @cancel="newDepartModalVisible = false"
            >
            </NewDepartment>
            <div slot="footer">
                <el-button type="cancel" @click="newDepartModalVisible = false">取消</el-button>
                <el-button type="primary" :loading="adding" @click="submitDepartAction"
                    >确定</el-button
                >
            </div>
        </el-dialog>
        <!-- 新增部门 end -->
        <!-- 新增账号 start -->
        <el-dialog
            v-if="newAccountModalVisible"
            :title="newAccountModalTitle"
            :visible.sync="newAccountModalVisible"
            width="660px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
        >
            <NewAccount
                ref="newAccount"
                :activeData="activeAccountData"
                :orgNames="orgNames"
                :orgId="orgId"
                @success="submitAccountSuccessAction"
                @fail="adding = false"
                @submitting="adding = true"
                @cancel="newAccountModalVisible = false"
            >
            </NewAccount>
            <div slot="footer">
                <el-button type="cancel" @click="newAccountModalVisible = false">取消</el-button>
                <el-button type="primary" :loading="adding" @click="submitAccountAction"
                    >确定</el-button
                >
            </div>
        </el-dialog>
        <!-- 新增账号 end -->
    </div>
</template>
<script>
import departmentTree from "@/components/census/setting/DepartmentTree.vue"
import NewDepartment from "@/components/census/setting/DepartmentNew.vue"
import NewAccount from "@/components/census/setting/AccountNew.vue"
import { mapState } from "vuex"
import utils from "@/assets/js/utils"
export default {
    name: "Notice",
    components: {
        departmentTree,
        NewDepartment,
        NewAccount,
    },
    props: {
        winH: {
            type: Number,
            default: 500,
        },
    },
    data() {
        return {
            filterForm: {},
            openMaintenance: utils.getStorage("SITE_INFOS").openMaintenance,
            loading: false,
            total: 0,
            currentPage: 1,
            pageSize: 10,
            dataList: [],
            orgId: "",

            adding: false,
            newDepartModalTitle: "新增部门",
            newDepartModalVisible: false,
            activeDepartData: null,

            newAccountModalTitle: "新增账号",
            newAccountModalVisible: false,
            activeAccountData: null,
            orgNames: [],
        }
    },
    watch: {},
    computed: {
        mainH() {
            return this.winH - 219
        },
        ...mapState(["siteInfos"]),
        isAdmin() {
            return this.siteInfos && this.siteInfos.userType == 1
        },
    },
    methods: {
        accountContactAction(item) {
            this.openFullLoading()
            this.$post("/systemsetup/systemsetup/accountContactCreateSub", { id: item.id }).then(
                (res) => {
                    this.closeFullLoading()
                    this.$message.success("操作成功")
                },
                (err) => {
                    this.closeFullLoading()
                    this.$message.error(err.msg || "系统错误")
                }
            )
        },
        getData(page) {
            this.loading = true
            let params = Object.assign(
                {
                    page: page,
                    limit: this.pageSize,
                },
                this.filterForm
            )
            if (this.isAdmin) {
                params.orgId = this.orgId
            } else {
                params.departmentId = this.orgId
            }
            this.$get("/systemsetup/systemsetup/userListPage", params).then(
                (res) => {
                    this.loading = false
                    let data = res.data
                    this.currentPage = page
                    this.total = data.totalSize
                    this.dataList = data.Items
                },
                (err) => {
                    this.loading = false
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        searchAction() {
            this.getData(1)
        },
        getDataById(id, cbk) {
            this.$get("/systemsetup/systemsetup/userDetail", {
                id: id,
            }).then(
                (res) => {
                    let thisData = res.data
                    cbk && cbk(thisData)
                },
                (err) => {
                    //
                }
            )
        },
        indexMethod(index) {
            return (this.currentPage - 1) * this.pageSize + index + 1
        },
        addDepartmentAction() {
            this.newDepartModalTitle = "新建部门"
            this.newDepartModalVisible = true
        },
        addAccountAction() {
            if (!this.orgId) {
                this.$message.error("请选择部门")
                return
            }
            this.activeAccountData = null
            this.newAccountModalTitle = "新建账号"
            this.newAccountModalVisible = true
        },
        editAction(item) {
            this.getDataById(item.id, (data) => {
                this.activeAccountData = data
                this.newAccountModalTitle = "编辑账号"
                this.newAccountModalVisible = true
                //判断当前按钮是否可点击
                // if (this.openMaintenance != "1") {
                //   this.newAccountModalVisible = false;
                //   alert("请前往维保系统注册")
                // }
            })
        },
        deleteAction(item, index) {
            //判断当前按钮是否可点击
            // if (this.openMaintenance != "1") {
            //   alert("请前往维保系统注册")
            //   return false;
            // }
            this.showConfirm("确定删除该帐号？", () => {
                this.deleting = true
                this.$post("/systemsetup/systemsetup/userDelete", {
                    id: item.id,
                }).then(
                    (res) => {
                        this.deleting = false
                        this.$message.success("删除成功")
                        this.dataList.splice(index, 1)
                        // this.getData(this.currentPage)
                    },
                    (err) => {
                        this.deleting = false
                        this.$message.error(err.msg)
                    }
                )
            })
        },
        handleCurrentChange(page) {
            this.getData(page)
        },
        orgClickAction(data, level, orgNames) {
            this.orgId = data.id
            this.orgNames = orgNames
            this.getData(1)
        },
        submitDepartSuccessAction() {
            this.newDepartModalTitle = false
            this.getData(1)
        },
        submitDepartAction() {
            this.$refs.newDepart.submitAction()
        },
        submitAccountSuccessAction() {
            this.adding = false
            this.newAccountModalVisible = false
            this.getData(1)
        },
        submitAccountAction() {
            this.$refs.newAccount.submitAction()
        },
    },
    created() {
        this.getData(1)
    },
    activated() {},
    mounted() {},
}
</script>
